window.onload=function(){
    var cleft=document.querySelector(".c_left");
    var leftHeight=cleft.offsetHeight;
    var ulBox=document.querySelector(".l_navs");
    var lis=ulBox.querySelectorAll("li");
    var ulBoxHeight=ulBox.offsetHeight;
    // 静止时最大，最小的滑动区间
    var max=0;
    var min=leftHeight-ulBoxHeight;
    // 滑动时最大，最小的滑动区间
    var maxBounceHeight=max+100;
    var minBounceHeight=min-100;
    var startY=0;
    var moveY=0;
    var distanceY=0;
    var currentY=0;
    ulBox.addEventListener("touchstart",function(e){
        startY=e.targetTouches[0].clientY;
    });
    ulBox.addEventListener("touchmove",function(e){
        moveY=e.targetTouches[0].clientY;
        distanceY=moveY-startY;
        if(currentY+distanceY<minBounceHeight ||currentY+distanceY>maxBounceHeight){
            // console.log("不能滑动了");
            return;
        }
        ulBox.style.transition="none";
        ulBox.style.top=(currentY+distanceY)+"px";
    });
    ulBox.addEventListener("touchend",function(e){
        if(currentY+distanceY<min){
            // 重置current
            currentY=min;
            ulBox.style.transition="top 0.5s";
            ulBox.style.top=min+"px";
        }else if(currentY+distanceY>max){
            currentY=max;
            ulBox.style.transition="top 0.5s";
            ulBox.style.top=max+"px";
        }
        currentY+=distanceY;
    });
    // 获取li的索引
    for(var i=0;i<lis.length;i++){
        lis[i].index=i;
    }
    // 绑定移动端轻触事件
    itcast.tap(ulBox,function (e) {
        for(var i=0;i<lis.length;i++){
            lis[i].classList.remove("active");
        }
        var li=e.target.parentNode;
        var liHeight=li.offsetHeight;
        li.classList.add("active");
        var index=li.index;
        ulBox.style.transition="top 0.5s";
        if(-index*liHeight<min){
            ulBox.style.top=min+"px";
            currentY=min;
        }else{
            ulBox.style.top=-index*liHeight+"px";
            currentY=-index*liHeight;
        }
      });
};
